<template>
  <div>
    <div>
      <el-form label-suffix="：" label-position="left" style="display: flex;">
        <el-col :span="3">
          <el-form-item label-width="55px" label="学期">
            <el-select v-model="queryForm.semester" size="mini" clearable placeholder="请选择学期" style="width: 100%; margin: 0 20px 0 -15px;" @change="changeShow">
              <el-option v-for="(item, index) in semesterList" :key="index" :label="item.xqmc" :value="item.xqmc" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <div class="button-style" style="width: 80px; margin: 6px 0 0 0;" @click="handleSearch">
            <img src="@/assets/assessment/icon-search.png" alt="" />
            <span style="font-size: 14px; color: #51aef6;">查询</span>
          </div>
        </el-col>
      </el-form>
    </div>
    <div v-show="isShowText" style="color:#004CA7;font-weight:800;margin-bottom:15px">{{queryForm.semester}}互联网选修课有：</div>
    <div>
      <el-table
        border
        :data="tableData"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class">
        <el-table-column prop="state" label="状态" show-overflow-tooltip align="center">
           <template slot-scope="scope">
             <span :style="scope.row.state === '2' ? 'color:#51AEF6' : 'color:#FA533C'">{{scope.row.state === '0' ? '待队长审核' : scope.row.state === '1' ? '待管理员审核': scope.row.state === '2' ? '已通过': '待填报 / 已驳回'}}</span>
           </template>
        </el-table-column>
            <!-- if (item.state === '0') {
              item.stateName = '待队长审批'
            } else if (item.state === '1') {
              item.stateName = '待管理员审批'
            } else if (item.state === '2') {
              item.stateName = '已通过'
            } else {
              item.stateName = '待提交'
            } -->
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <div style="display: flex;">
              <div v-if="scope.row.btnShow" class="button-style" style="width: 60px;" @click="handleFill(scope.row)">
                <span style="font-size: 14px; color: #51aef6;">填报</span>
              </div>
              <div v-if="scope.row.btnShow" class="button-style" style="width: 60px; margin-left: 15px;" @click="handleSubmit(scope.row)">
                <span style="font-size: 14px; color: #51aef6;">提交</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="平台名称" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.ptname }}</div>
<!--            <div v-if="scope.row.id % 2 === 1">-->
<!--              <div style="text-align: left; font-weight: 600; margin-left: 50px;">审批进度：</div>-->
<!--              <div>审批进度：</div>-->
<!--              <div>审批进度：</div>-->
<!--              <div>审批进度：</div>-->
<!--            </div>-->
          </template>
        </el-table-column>
        <el-table-column prop="xxkhlwmc" label="互联网选修课名称" show-overflow-tooltip align="center" />
        <el-table-column prop="xuehour" label="学时" show-overflow-tooltip align="center" />
        <el-table-column prop="score" label="成绩" show-overflow-tooltip align="center" />
        <el-table-column prop="scorejietuname" label="成绩证明截图" show-overflow-tooltip align="center" />
        <el-table-column prop="tqzmclfilename" label="其他证明材料" show-overflow-tooltip align="center" />
        <el-table-column prop="bz" label="备注" show-overflow-tooltip align="center" />
      </el-table>
    </div>
    <div style="float: right; margin-top: 15px; padding-bottom: 15px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="padding: 0;">
      </el-pagination>
    </div>
    <el-dialog title="互联网选修课成绩填报" :visible.sync="dialogShow" width="800px">
      <el-form class="my-form-container" style="width: 100%; height: 100%;">
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">成绩</div>
            <el-input v-model="dialogForm.score" size="mini" clearable placeholder="请输入成绩" style="margin: 15px 20px;" />
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">成绩证明截图</div>
            <el-upload
              ref="uploadImage"
              class="uploadStyle"
              action="string"
              :http-request="handleUpload"
              accept=".jpg"
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="small" type="primary">选择图片</el-button>
            </el-upload>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">其他证明材料</div>
            <el-upload
              ref="uploadFile"
              class="uploadStyle"
              action="string"
              :http-request="handleUpload1"
              :on-exceed="handleExceed"
              :limit="1"
              :file-list="fileList1">
              <el-button size="small" type="primary">上传文件</el-button>
            </el-upload>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">备注</div>
            <el-input v-model="dialogForm.bz" size="mini" clearable placeholder="请输入备注" style="margin: 15px 20px;" />
          </el-form-item>
        </div>
      </el-form>
      <div style="display: flex; justify-content: center;">
        <div class="button-style" style="width: 60px; margin: 6px 0 0 21px; background: #FFF6F0; border: 1px solid #E9B535;" @click="handleSave">
          <span style="font-size: 14px; color: #E9B535;">保存</span>
        </div>
        <div class="button-style" style="width: 100px; margin: 6px 0 0 21px; background: #f1f8fe; border: 1px solid #51aef6;"  @click="handleSubmit">
          <span style="font-size: 14px; color: #51aef6;">保存并提交</span>
        </div>
        <div class="button-style" style="width: 60px; margin: 6px 0 0 21px; background: #FFEEEF; border: 1px solid #FA533C;"  @click="handleCancel">
          <span style="font-size: 14px; color: #FA533C;">取消</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryElectiveList, reqGetXqList, uploadImage, uploadFile, queryElectiveDetail, updateElectiveInfo } from '@/api/admin1/check'
export default {
  data() {
    return {
      isShowText:false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      dialogShow: false,
      queryForm: {
        semester: ''
      },
      semesterList: [],
      tableData: [],
      dialogForm: {
        score: '',
        scorejietu: '',
        tqzmcl: '',
        scorejietuname: '',
        tqzmclfilename: '',
        bz: ''
      },
      fileList: [],
      fileList1: []
    }
  },
  mounted () {
    reqGetXqList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.semesterList = res.data.data
      }
    })
    this.handleSearch()
  },
  methods: {
    changeShow(val){
      this.isShowText = false;
    },
    //文件限制传一个的提示
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    // handleSetRowId: function ({ row, rowIndex }) {
    //   row.id = rowIndex
    // },
    // handleSpan: function ({ rowIndex, columnIndex }) {
    //   if (columnIndex < 2) {
    //     if (rowIndex % 2 === 0) {
    //       return {
    //         rowspan: 2,
    //         colspan: 1
    //       }
    //     } else {
    //       return {
    //         rowspan: 0,
    //         colspan: 0
    //       }
    //     }
    //   } else {
    //     if (rowIndex % 2 === 1) {
    //       return {
    //         rowspan: 1,
    //         colspan: 7
    //       }
    //     } else {
    //       return {
    //         rowspan: 1,
    //         colspan: 1
    //       }
    //     }
    //   }
    // },
    handleSearch: function () {
      this.tableData = []
      this.total = 0
      const params = {
        xueqi: this.queryForm.semester
      }
      queryElectiveList(params, this.pageNo, this.pageSize).then(res => {
        if (res.data.data.records && res.data.data.records.length > 0) {
          this.tableData = res.data.data.records;
          this.isShowText = true;
          this.total = res.data.data.total
          this.tableData.forEach(item => {
            item.btnShow = item.state === '-1'
          })
        }
      })
    },
    handleFill: function (row) {
      queryElectiveDetail(row.id).then(res => {
        if (res.data.code === 200) {
          this.dialogForm = res.data.data
          this.fileList = [{
            name: res.data.data.scorejietuname,
            url: res.data.data.scorejietu
          }]
          this.fileList1 = [{
            name: res.data.data.tqzmclfilename,
            url: res.data.data.tqzmcl
          }]
        }
      })
      this.dialogShow = true
    },
    handleSave: function () {
      if (this.dialogForm.score === '') {
        this.$message({
          message: '请输入成绩！',
          type: 'warning'
        })
      } else {
        const params = {
          id: this.dialogForm.id,
          score: this.dialogForm.score,
          bz: this.dialogForm.bz,
          scorejietu: this.dialogForm.scorejietu,
          tqzmcl: this.dialogForm.tqzmcl
        }
        updateElectiveInfo(params).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '保存成功！',
              type: 'success'
            })
            this.dialogShow = false
          } else {
            this.$message({
              message: '保存失败！',
              type: 'warning'
            })
          }
          this.handleSearch()
        })
      }
    },
    handleSubmit: function () {
      if (this.dialogForm.score === '') {
        this.$message({
          message: '请输入成绩！',
          type: 'warning'
        })
      } else {
        const params = {
          id: this.dialogForm.id,
          score: this.dialogForm.score,
          bz: this.dialogForm.bz,
          scorejietu: this.dialogForm.scorejietu,
          tqzmcl: this.dialogForm.tqzmcl,
          state: '0'
        }
        updateElectiveInfo(params).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '提交成功！',
              type: 'success'
            })
            this.dialogShow = false
          } else {
            this.$message({
              message: '提交失败！',
              type: 'warning'
            })
          }
          this.handleSearch()
        })
      }
    },
    handleCancel: function () {
      this.dialogShow = false
    },
    handleUpload: function (file) {
      const that = this
      let formData = new FormData();
      formData.append('file', file.file);
      uploadImage(formData).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          // that.$refs.uploadImage.clearFiles()
          that.dialogForm.scorejietu = res.data.data
          that.dialogForm.scorejietuname = res.data.data.split(';')[1]
          that.$message({
            message: '图片上传成功！',
            type: 'success'
          })
        } else {
          that.$message({
            message: '图片上传失败！',
            type: 'warning'
          })
        }
      })
    },
    handleUpload1: function (file) {
      const that = this
      let formData = new FormData();
      formData.append('file', file.file);
      uploadFile(formData).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          that.dialogForm.tqzmcl = res.data.data
          that.dialogForm.tqzmclfilename = res.data.data.split(';')[1]
          that.$message({
            message: '文件上传成功！',
            type: 'success'
          })
        } else {
          that.$message({
            message: '文件上传失败！',
            type: 'warning'
          })
        }
      })
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.handleSearch()
    },
    handleCurrentChange: function (val) {
      this.pageNo = val
      this.handleSearch()
    }
  }
}
</script>

<style lang="less" scoped>
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  .my-form-item {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid rgba(0, 76, 167, 0.39);
    margin-bottom: 0;
    > div {
      display: flex;
      height: 100%;
      &:nth-child(2) {
        .my-form-item-label {
          border-left: 1px solid rgba(0, 76, 167, 0.39);
        }
      }
      .my-form-item-label{
        width: 220px;
        padding-left: 60px;
        background: rgba(0, 76, 167, 0.1);
        display: flex;
        flex: none;
        align-items: center;
        color: #004CA7;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
        margin-left: -1px;
        .mustW {
          color: red;
        }
      }
      span {
        color: #004CA7;
        margin-left: 30px;
        height: 70px;
        line-height: 70px;
      }
    }
  }
  .button-style {
    float: left;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    width: 110px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
    > span {
      color: #51aef6;
    }
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
  /deep/ .uploadStyle .el-button {
    float: left;
    margin: 20px 20px;
    background: #EFEBFF;
    color: #624CC5;
    border: 1px solid #624CC5;
    width: 90px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
  }
  /deep/ .uploadStyle .el-upload-list {
    margin-top: -72px;
    margin-left: 150px;
  }
</style>
